<template>
    <div class="login">
        <section class="form_container">
            <div class="manage_tip">
                <span class="title">用户登录</span>

                <el-form :model="loginUser" status-icon :rules="rules" ref="loginForm" label-width="60px" class="loginForm">
                    
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="loginUser.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="loginUser.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
                        <el-button @click="resetForm('loginForm')">重置</el-button>
                    </el-form-item>

                    <div class="tiparea">
                        <p>还没有账号？现在<router-link to='/register'>注册</router-link></p>
                    </div>

                </el-form>

                

            </div>
        </section>
    </div>
</template>

<script>
import jwt_decode from 'jwt-decode';
export default {
    name:'login',
    components:{},
    data(){
        var checkPassword = (rule, value, callback) => {
            
            if (value !== this.registerUser.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }
        return {
            loginUser:{
                email:'',
                password:'',
            },
            rules:{
                
                email:[
                    {required:true,message:"邮箱不能为空！",trigger:"blur"},
                    {type:"email",message:"邮箱格式不正确！",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空！",trigger:"blur"},
                    {min:6,max:16,message:"长度在6~10范围内！",trigger:"blur"}
                ],
                
            },
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/api/users/login',this.loginUser)
            .then(res=>{
                // console.log(res)
                const { token }=res.data;
                localStorage.setItem('eleToken',token);

                //解析token
                const decoded=jwt_decode(token);
                //token存储到vuex
                this.$store.dispatch('setAuthenticated',!this.isEmpty(decoded));
                this.$store.dispatch('setUser',decoded);

                this.$router.push('/index');
            });
            
          } 
        });
      },
      isEmpty(value){
          return (
              value === undefined||
              value === null ||
              (typeof value ==="object" && Object.keys(value).length===0)||
              (typeof value === "string" && value.trim().length===0)
          );
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .login{
        position:relative;
        width:100%;
        height:100%;
        background:url(../assets/bg2.jpg) no-repeat center center;
        background-size:100% 100%;
    }
    .form_container{
        width:370px;
        height:210px;
        position: absolute;
        top:10%;
        left:50%;
        margin-left:-185px;
        padding:25px;
        border-radius:5px;
        text-align: center;
    }
    .form_container .manage_tip .title{
        font-size: 26px;
        font-weight:bold;
        color:#000;
    }
    .loginForm{
        margin-top:20px;
        background-color:#fff;
        padding: 20px 40px 20px 10px;
        border-radius: 5px;
        box-shadow: 0px 5px 10px #ccc;
    }
    .tiparea{
        text-align: right;
        font-size:12px;
        color:#333;
    }
    .tiparea p a{
        color:#409eff;
    }
</style>
